<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            hello
        </div>
    </body>
    <script>
        // 模拟Vue中的data选项
        let data = {
            msg: "hello",
            count: 10,
        };
        // 模拟Vue中的实例
        let vm = {};

        // 调用封装响应式函数
        proxyData(data);

        function proxyData(data) {
            // 遍历data对象的所有属性
            Object.keys(data).forEach((key) => {
                // 数据劫持：当访问或者设置vm中的成员的时候，做一些干预操作
                Object.defineProperty(vm, key, {
                    // 可枚举
                    enumerable: true,
                    // 可配置(可以使用delete删除，可以通过defineProperty重新定义)
                    configurable: true,
                    // 当前获取值时候执行
                    get() {
                        console.log("get:", data[key]);
                        return data[key];
                    },
                    // 当设置值时候执行
                    set(newValue) {
                        console.log("set", newValue);
                        if (newValue === data[key]) {
                            return;
                        }
                        data[key] = newValue;
                        // 数据更改，更新DOM的值
                        document.querySelector("#app").textContent = data[key];
                    },
                });
            });
        }

        // 测试
        vm.msg = "Hello World";
        console.log(vm.msg);
    </script>
</html>
